<script>
import {
  defineComponent,
  reactive,
  toRefs
} from 'vue'
import PageTable from '../../../components/PageTable/index.vue'

export default defineComponent({
  components: {
    PageTable
  },
  setup() {
    const state = reactive({
      query: {
        pageSize: 10,
        pageNum: 1
      },
      list: [
        { id: '1', a: '1', b: '1', c: '1', d: '1' },
        { id: '2', a: '2', b: '2', c: '2', d: '2' },
        { id: '3', a: '3', b: '3', c: '3', d: '3' },
        { id: '4', a: '4', b: '4', c: '4', d: '4' }
      ],
      selectedList: []
    })

    const handleSelect = () => {
      console.log(state.selectedList)
    }

    return {
      ...toRefs(state),
      handleSelect
    }
  }
})
</script>

<template>
  <div class="example-table-container">
    <page-table v-model:page-size="query.pageSize"
                v-model:page-num="query.pageNum"
                v-model:selected-list="selectedList"
                :table-data="list"
                :has-query="false"
                :has-operation="false"
                border-mode
                select-mode
                @select="handleSelect">
      <template #table>
        <el-table-column prop="a" label="字段1" />
        <el-table-column prop="b" label="字段2" />
        <el-table-column prop="c" label="字段3" />
        <el-table-column prop="d" label="字段4" />
      </template>
    </page-table>
  </div>
</template>

<style lang="scss">
.example-table-container {
  height: 100%;
}
</style>
